<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }

    body {
      padding: 10px;
    }

    ul li {
      list-style: none;
      border: 1px solid #000;
      overflow: hidden;
      max-height: 0;
    }

    span {
      border-bottom: 1px black solid;
      display: block;
      line-height: 30px;
      background-color: #ccc
    }

    span:hover {
      cursor: pointer;
      text-decoration: underline;
    }
  </style>
</head>

<body>
  <span>1.测试内容</span>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <span>2.测试内容</span>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <span>3.测试内容</span>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
    var span = document.getElementsByTagName('span')
    console.log(span)
    for (var i = 0; i < span.length; i++) {
      span[i].onclick = function () {
        var idnex = this.nextElementSibling
        if (idnex.style.maxHeight) {
          idnex.style.maxHeight = null;
        } else {
          idnex.style.maxHeight = idnex.scrollHeight + 'px'
        }
      }
    }
    // var spanTo = document.getElementsByTagName('span');
    // console.log('@', spanTo)
    // for (var i = 0; i < spanTo.length; i++) {
    //   //监听事件
    //   spanTo[i].onclick = function () {
    //     //返回指定元素之后的下一个兄弟元素
    //     var brotherTo = this.nextElementSibling;
    //     //当他等于上面的 span 点击的时候就会为空
    //     if (brotherTo.style.maxHeight) {
    //       brotherTo.style.maxHeight = null;
    //       //当他不等于上面那个 span 点击的时候就他显示 span
    //     } else {
    //       //他返回该元素的像素高度，高度包含内边距
    //       brotherTo.style.maxHeight = brotherTo.scrollHeight + 'px'
    //     }
    //   }
    // }
  </script>
</body>

</html>